<template>
    <div class="container">
        <div class="apply-container">
            <div class="apply-container-head"></div>
            <div class="apply-container-body">
                <div class="apply-container-body-title">
                    <div class="apply-container-body-title-font">维修申请详情</div>
                    <div class="apply-container-body-title-return">
                        <el-button size="small" @click="goBackPage">返回</el-button>
                    </div>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="apply-container-body-content">
                    <el-form :model="RepairOrder" label-width="110px" label-position="LabelPosition"
                        :rules="RepairOrderRules" style="width: 100%;">

                        <el-form-item label="姓名:" prop="InputUserName" style="width: 40%;">
                            <el-input v-model="RepairOrder.InputUserName" placeholder="请输入姓名" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="工号:" prop="InputUserId" style="width: 40%;">
                            <el-input v-model="RepairOrder.InputUserId" placeholder="请输入工号" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="申请人电话:" prop="InputUserPhone" style="width: 40%;">
                            <el-input v-model="RepairOrder.InputUserPhone" placeholder="请输入申请人电话" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="车牌号:" prop="SelectAutoPlateNum" style="width: 40%;">
                            <el-select v-model="RepairOrder.SelectAutoPlateNum" placeholder="请选择车牌号" :disabled="true"
                                clearable>
                                <el-option v-for="item in RepairOrder.SelectAutoPlateNumOptions" :key="item" :label="item"
                                    :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="维修类型:" prop="SelectAutoRepairType" style="width: 40%;">
                            <el-select v-model="RepairOrder.SelectAutoRepairType" placeholder="请选择维修类型" :disabled="true"
                                clearable>
                                <el-option label="汽车大修" value="汽车大修"></el-option>
                                <el-option label="汽车总成大修" value="汽车总成大修"></el-option>
                                <el-option label="汽车小修" value="汽车小修"></el-option>
                                <el-option label="零部件修理" value="零部件修理"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="维修描述:" prop="InputRepairDescribe" style="width: 50%;">
                            <el-input v-model="RepairOrder.InputRepairDescribe" type="textarea" :disabled="true"
                                placeholder="请输入内容" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="维修厂:" prop="SelectRepairFactory" style="width: 40%;">
                            <el-select v-model="RepairOrder.SelectRepairFactory" placeholder="请选择车牌号" :disabled="true"
                                clearable>
                                <el-option label="驰加" value="驰加"></el-option>
                                <el-option label="华胜汽修" value="华胜汽修"></el-option>
                                <el-option label="博世车联" value="博世车联"></el-option>
                                <el-option label="车工坊" value="车工坊"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="送修日期:" prop="RepairStartTime" style="width: 40%;">
                            <el-date-picker v-model="RepairOrder.RepairStartTime" type="date" :disabled="true"
                                value-format="yyyy-MM-dd" placeholder="请选择取车时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="期望取车时间:" prop="RepairEndTime" style="width: 40%;">
                            <el-date-picker v-model="RepairOrder.RepairEndTime" type="date" :disabled="true"
                                value-format="yyyy-MM-dd" placeholder="请选择期望取车时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="提交时间:" prop="SubmitTime" style="width: 40%;">
                            <el-input v-model="RepairOrder.SubmitTime" :disabled="true" clearable></el-input>
                        </el-form-item>
                        <!-- <div class="apply-container-body-content-submit">
                            <el-button type="primary" @click="Submit">提交</el-button>
                        </div> -->
                    </el-form>
                </div>
            </div>
            <div class="apply-container-footer"></div>
        </div>
    </div>
</template>
  
<script>
import { getRepairOrderDetail } from "@/api/order.js"
export default {
    name: 'RepairOrderDetailView',
    data() {
        return {
            LabelPosition: 'right',
            RepairOrder: {
                InputUserName: null,
                InputUserId: null,
                InputUserPhone: null,
                SelectAutoPlateNum: null,
                SelectAutoPlateNumOptions: [],
                SelectAutoRepairType: null,
                InputRepairDescribe: null,
                SelectRepairFactory: null,
                RepairStartTime: null,
                RepairEndTime: null,
                SubmitTime: null,
            },
            SubmitRepairOrder: {
                userName: null,
                userId: null,
                userPhone: null,
                autoPlateNum: null,
                autoRepairType: null,
                repairDescribe: null,
                repairFactory: null,
                repairStartTime: null,
                repairEndTime: null,
                submitTime: null,
                repairOrderStatus: null,
                repairOrderProgress: null,
            },
        }
    },

    methods: {
        goBackPage() {
            this.$router.go(-1)
        },
    },
    mounted() {
        getRepairOrderDetail(this.$route.query.repairOrderId).then(res => {
            this.SubmitRepairOrder = res.data.data

            this.RepairOrder.InputUserName = this.SubmitRepairOrder.userName
            this.RepairOrder.InputUserId = this.SubmitRepairOrder.userId
            this.RepairOrder.InputUserPhone = this.SubmitRepairOrder.userPhone
            this.RepairOrder.SelectAutoPlateNum = this.SubmitRepairOrder.autoPlateNum
            this.RepairOrder.SelectAutoRepairType = this.SubmitRepairOrder.autoRepairType
            this.RepairOrder.InputRepairDescribe = this.SubmitRepairOrder.repairDescribe
            this.RepairOrder.SelectRepairFactory = this.SubmitRepairOrder.repairFactory
            this.RepairOrder.RepairStartTime = this.SubmitRepairOrder.repairStartTime
            this.RepairOrder.RepairEndTime = this.SubmitRepairOrder.repairEndTime
            this.RepairOrder.SubmitTime = this.SubmitRepairOrder.submitTime
        })
    }
}
</script>
  
<style scoped>
.container {
    /* height: 100%; */
    width: 95%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #ffffff;
}

.apply-container {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    /* background-color: #f2f2f2; */

}

.apply-container-head {
    width: 95%;
    height: 30px;
    margin: 0 auto;
}

.apply-container-body {
    width: 95%;
    height: 92%;
    margin: 0 auto;
    background-color: #ffffff;

}

.apply-container-body-title {
    width: 98%;
    height: 5%;
    margin: 0 auto;
    display: flex;
}

.apply-container-body-title-return {
    width: 100%;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.apply-container-body-title-line {
    height: 1px;
    width: 98%;
    margin: 5px auto;
}

.apply-container-body-title-font {
    width: 100%;
    height: 99%;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding-top: 10px;
}

.apply-container-body-content {
    width: 85%;
    height: 100%;
    margin: 20px auto;
    display: flex;

}

.apply-container-body-content-submit {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.apply-container-footer {
    width: 95%;
    height: 10px;
    margin: 0 auto;
}
</style>